<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>报障详情frame</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/complaint_details.css"/>
		<style>
			body {
			}
			.m-t {
				margin-top: 13px;
			}
			.m-l {
				margin-left: 10px;
			}
			.jj-view {
				display: none;
			}
			.color-1 {
				color: #ff8000;
			}
			.color-2 {
				color: #999999;
			}
			.color-3 {
				color: #101010;
				font-size: 14px;
			}
			.color-4 {
				color: #ff0f2e;
			}
			/* 处理结果容器 */
			.complaint-hr-container {
				margin-top: 13px;
				padding: 13px 15px 0;
				border-top: #e6e6e6 1px solid;
			}
			/* 处理员样式 */
			.complaint-hr-m {
				margin-bottom: 10px;
			}
			/* 按钮 */
			.complaint-hr-btn {
				height: 35px;
				line-height: 35px;
				text-align: center;
				border-radius: 5px;
				color: #fff;
				margin: 28px 7.5px 0;
				margin-bottom: 38px;
			}
			.complaint-hr-container .complaint-hr-interval {
				width: 30px;
			}
			.complaint-hr-btn-urgent {
				background-color: #d1001b;
			}
			.complaint-hr-btn-cancel-c {
				background-color: #f2a23a;
			}
			.complaint-hr-btn-evaluate {
				background-color: #f2a23a;
			}
		</style>
	</head>
	<body>
		<div class="commit-content-container">
			<div class="commit-content-title flex-container flex-between">
				<div id="acms-msg-1">
					--
				</div>
				<div id="acms-msg-2">
					--
				</div>
			</div>
			<div class="commit-content-msg">
				<!-- 报障状态,在已加急的情况下展示 -->
				<div class="jj-view">
					<span  class="commit-content-msg-title">报障状态：</span><span id="acms-msg-3" class="color-4">已加急</span>
				</div>
				<!-- 报障状态,在已加急的情况下展示加急时间 -->
				<div class="jj-view">
					<span class="commit-content-msg-title">加急时间：</span><span id="acms-msg-4">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">联系电话：</span><span id="acms-msg-5">--</span>
				</div>
				<div id="div-acms-msg-16">
					<span class="commit-content-msg-title">校园卡号：</span><span id="acms-msg-16">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">故障地点：</span><span id="acms-msg-6">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">具体地址：</span><span id="acms-msg-7">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">网络类型：</span><span id="acms-msg-8">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">报障时间：</span><span id="acms-msg-9">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">故障情况：</span><span id="acms-msg-10">--</span>
				</div>
				<div>
					<span class="commit-content-msg-title">故障描述：</span>
					<div id="acms-msg-11">
						--
					</div>
				</div>
			</div>
			<div id="acms-msg-12-p" class="camera-container mg-t">
				<img id="acms-msg-12" class="camera-container-img" src="" />
				<div class="camera-container-delete"></div>
			</div>
		</div>
		<div id="acms-show-view"></div>
		<!-- 待处理 -->
		<div id="acms-c-1">
			<div class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-1-msg-1" class="color-1">--</span>
				</div>
				<div id="acms-c-1-msg-2-p">
					<div class="complaint-hr-pending none flex-container flex-center-v">
						<div  id="acms-c-1-msg-2" class="complaint-hr-btn-cancel-c complaint-hr-btn flex-item">
							取消报障
						</div>
						<div class="complaint-hr-interval"></div>
						<div  id="acms-c-1-msg-3" class="complaint-hr-btn-urgent complaint-hr-btn flex-item">
							加急
						</div>
					</div>
				</div>
				<div id="acms-c-1-msg-4-p">
					<div class="complaint-hr-urgented none flex-container flex-center-v">
						<div id="acms-c-1-msg-4" class="complaint-hr-btn-cancel-c complaint-hr-btn flex-item">
							取消报障
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 已受理-->
		<div id="acms-c-2">
			<div class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-2-msg-1" class="color-1">--</span>
				</div>
				<div class="m-t color-2">
					<span>接障时间：</span><span id="acms-c-2-msg-2">--</span>
				</div>
			</div>
		</div>
		<!-- 已处理 -->
		<div id="acms-c-3">
			<div id="acms-c-3-sub-1" class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-3-sub-1-msg-1" class="color-1">--</span>
				</div>
				<div class="m-t color-2">
					<span>接障时间：</span><span id="acms-c-3-sub-1-msg-2">--</span>
				</div>
				<div class="m-t color-2">
					<span>处理时间：</span><span id="acms-c-3-sub-1-msg-3">--</span>
				</div>
				<div id="acms-c-3-sub-1-evaluate">
					<div class=" flex-container flex-center-v">
						<div id="acms-c-3-sub-1-evaluate-msg-1" class="complaint-hr-btn complaint-hr-btn-evaluate flex-item">
							评价
						</div>
					</div>
				</div>
			</div>
			<div id="acms-c-3-sub-2"  class="complaint-hr-container">
				<div class="flex-container flex-center-v">
					<div>
						报障评分：
					</div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
				</div>
				<div class="m-t">
					<div>
						评分描述：
					</div>
					<div id="acms-c-3-sub-2-msg-1" class="color-3 m-t">
						--
					</div>
				</div>
			</div>
		</div>
		<!-- 处理中 -->
		<div id="acms-c-4">
			<div class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-4-msg-1" class="color-1">--</span>
				</div>
				<div class="m-t color-2">
					<span>接障时间：</span><span id="acms-c-4-msg-2">--</span>
				</div>
			</div>
		</div>
		<!-- 已完成 -->
		<div id="acms-c-5">
			<div id="acms-c-5-sub-1" class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-5-sub-1-msg-1" class="color-1">--</span>
				</div>
				<div class="m-t color-2">
					<span>接障时间：</span><span id="acms-c-5-sub-1-msg-2">--</span>
				</div>
				<div class="m-t color-2">
					<span>处理时间：</span><span id="acms-c-5-sub-1-msg-3">--</span>
				</div>
				<div id="acms-c-5-sub-1-evaluate">
					<div class=" flex-container flex-center-v">
						<div id="acms-c-5-sub-1-evaluate-msg-1" class="complaint-hr-btn complaint-hr-btn-evaluate flex-item">
							评价
						</div>
					</div>
				</div>
			</div>
			<div id="acms-c-5-sub-2" class="complaint-hr-container">
				<div class="acms-c-1-msg-1 flex-container flex-center-v">
					<div>
						报障评分：
					</div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
				</div>
				<div class="m-t">
					<div>
						评分描述：
					</div>
					<div class="m-t color-3" id="acms-c-5-sub-2-msg-1">
						--
					</div>
				</div>
			</div>
		</div>
		<!-- 报障关闭 -->
		<div id="acms-c-6">
			<div class="complaint-hr-container">
				<div>
					<span>处理员：</span><span id="acms-c-6-msg-1" class="color-1">--</span>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		//故障id
		var mCpId;
		//是否请求加急
		var isUrgent = false;
		//是否请求取消
		var isCancel = false;
		apiready = function() {
			initData();
			requestCpDetails(mCpId);
			setReloadCpDListener();
		};
		function initData() {
			mCpId = api.pageParam.id;
		}

		/**
		 * 初始化view
		 * @param{JSON} data - 服务器请求获取到的报障详情数据
		 */
		function initView(data) {
			var doc = document;
			var statusView = doc.getElementById('acms-msg-2');
			refreshView(doc);
			showView(doc, data);
			//----------------------
			//服务器数据处理状态状态：状态： 1 待处理 2.已受理 3 .处理中  4.已处理 5.疑难单 6.报障关闭 7.已完成
			var status = data.status;
			var isTwo = data.two == 0 ? false : true;
			//加急标识 1.加急 0.不加急
			var jStatus = data.urgent == 1 ? true : false;
			//判断，当前数据状态，显示不同的view
			switch(parseInt(status)) {
				case 1:
					//待处理
					statusView.innerText = '待处理';
					showView1(doc, data, jStatus);
					break;
				case 2:
					statusView.innerText = '已受理';
					showView2(doc, data, isTwo);
					break;
				case 3:
					//处理中
					statusView.innerText = '处理中';
					showView3(doc, data, isTwo);
					break;
				case 4:
					//已处理
					statusView.innerText = '已处理';
					showView4(doc, data, isTwo);
					break;
				case 5:
					//疑难单
					statusView.innerText = '疑难单';
					showView4(doc, data, isTwo);
					break;
				case 6:
					//报障关闭
					showView5(doc);
					statusView.innerText = '报障关闭';
					break;
				case 7:
					//已完成
					statusView.innerText = '已完成';
					showView6(doc, data, isTwo);
					break;
				default:
					MyCom.errorTip(2);
			}
		}

		function refreshView(doc) {
			mC1 = doc.getElementById('acms-c-1');
			mC2 = doc.getElementById('acms-c-2');
			mC3 = doc.getElementById('acms-c-3');
			mC4 = doc.getElementById('acms-c-4');
			mC5 = doc.getElementById('acms-c-5');
			mC6 = doc.getElementById('acms-c-6');
			mC1.style.display = 'none';
			mC2.style.display = 'none';
			mC3.style.display = 'none';
			mC4.style.display = 'none';
			mC5.style.display = 'none';
			mC6.style.display = 'none';
		}

		function showView(doc, data) {
			//姓名
			var msg_1 = doc.getElementById('acms-msg-1');
			//电话
			var msg_5 = doc.getElementById('acms-msg-5');
			//地点
			var msg_6 = doc.getElementById('acms-msg-6');
			//具体地址
			var msg_7 = doc.getElementById('acms-msg-7');
			//网络类型
			var msg_8 = doc.getElementById('acms-msg-8');
			//报障时间
			var msg_9 = doc.getElementById('acms-msg-9');
			//故障情况
			var msg_10 = doc.getElementById('acms-msg-10');
			//故障描述
			var msg_11 = doc.getElementById('acms-msg-11');
			//报障上传的图片
			var msg_12 = doc.getElementById('acms-msg-12');
			var msg_12_p = doc.getElementById('acms-msg-12-p');
			msg_1.innerText = MyCom.dataFaultTolerant(data.nick_name);
			msg_5.innerText = MyCom.dataFaultTolerant(data.user_phone);
			msg_6.innerText = MyCom.dataFaultTolerant(data.warn_location);
			msg_7.innerText = MyCom.dataFaultTolerant(data.address);
			if (data.internet_type == 1) {
				msg_8.innerText = '宽带网络';
			} else {
				msg_8.innerText = 'WiFi';
			}
			msg_9.innerText = MyCom.dataFaultTolerant(data.create_time);
			msg_10.innerText = MyCom.dataFaultTolerant(data.title);
			msg_11.innerText = MyCom.dataFaultTolerant(data.content);

			//校园卡号
			var msg16 = doc.getElementById('acms-msg-16');
			console.log(".......msg16............"+data.school_number);
			if(typeof(data.school_number) == 'undefined' || typeof(data.school_number) === ''){
				var divMsg16 = doc.getElementById('div-acms-msg-16');
				divMsg16.style.display = 'none';
			}else {
					msg16.innerText = MyCom.dataFaultTolerant(data.school_number);
			}

			if (data.images == null) {
				msg_12_p.style.display = 'none';
			} else {
				msg_12_p.style.display = 'block';
				msg_12.src = data.images;
				msg_12.onclick = function() {
					openLargePicPg(data.images);
				}
			}
		}

		/**
		 * 待处理
		 */
		function showView1(doc, data, jStatus) {
			console.log('showView1');
			mC1.style.display = 'block';
			//处理员
			var msg_1 = doc.getElementById('acms-c-1-msg-1');
			//取消按钮
			var msg_2 = doc.getElementById('acms-c-1-msg-2');
			var msg_2_p = doc.getElementById('acms-c-1-msg-2-p');
			//加急按钮
			var msg_3 = doc.getElementById('acms-c-1-msg-3');
			//取消按钮
			var msg_4 = doc.getElementById('acms-c-1-msg-4');
			var msg_4_p = doc.getElementById('acms-c-1-msg-4-p');
			//加急状态view
			var jjView = doc.getElementsByClassName('jj-view');
			var jjtime = doc.getElementById('acms-msg-4');
			msg_1.innerText = '未分配';
			if (jStatus) {
				msg_2_p.style.display = 'none';
				msg_4_p.style.display = 'block';
				for (var i = 0; i < jjView.length; i++) {
					jjView[i].style.display = 'block';
				}
				jjtime.innerText = MyCom.dataFaultTolerant(data.urgent_time);
			} else {
				msg_2_p.style.display = 'block';
				msg_4_p.style.display = 'none';
			}
			msg_2.onclick = function() {
				requestCancelCp(mCpId);
			}
			msg_3.onclick = function() {
				requestUrgentCp(mCpId);
			}
			msg_4.onclick = function() {
				requestCancelCp(mCpId);
			}
		}

		/**
		 * 已受理
		 */
		function showView2(doc, data, isTwo) {
			console.log('showView2');
			mC2.style.display = 'block';
			//故障处理人
			var msg_1 = doc.getElementById('acms-c-2-msg-1');
			//接障时间
			var msg_2 = doc.getElementById('acms-c-2-msg-2');
			msg_1.innerText = MyCom.fomatName(data.action_person);
			msg_2.innerText = MyCom.dataFaultTolerant(data.dispatch_time);
		}

		/**
		 * 处理中
		 */
		function showView3(doc, data, isTwo) {
			console.log('showView3');
			mC4.style.display = 'block';
			//故障处理人
			var msg_1 = doc.getElementById('acms-c-4-msg-1');
			//接障时间
			var msg_2 = doc.getElementById('acms-c-4-msg-2');
			msg_1.innerText = MyCom.fomatName(data.action_person);
			msg_2.innerText = MyCom.dataFaultTolerant(data.dispatch_time);
		}

		/**
		 * 已处理
		 */
		function showView4(doc, data, isTwo) {
			console.log('showView4');
			var gradle = data.point;
			mC3.style.display = 'block';
			//处理员
			var msg_1 = doc.getElementById('acms-c-3-sub-1-msg-1');
			//接障时间
			var msg_2 = doc.getElementById('acms-c-3-sub-1-msg-2');
			//处理时间
			var msg_3 = doc.getElementById('acms-c-3-sub-1-msg-3');
			//二次
			//评价按钮
			var evaluateBtn = doc.getElementById('acms-c-3-sub-1-evaluate-msg-1');
			var evaluateBtnP = doc.getElementById('acms-c-3-sub-1-evaluate');
			//评分
			var sub_2 = doc.getElementById('acms-c-3-sub-2');
			var pointMsg = doc.getElementById('acms-c-3-sub-2-msg-1');
			var xxs = sub_2.getElementsByClassName('icon-xx');
			var i = 0;
			if (gradle == null) {
				sub_2.style.display = 'none';
				evaluateBtnP.style.display = 'block';
			} else {
				sub_2.style.display = 'block';
				evaluateBtnP.style.display = 'none';
			}
			msg_1.innerText = MyCom.fomatName(data.action_person);
			msg_2.innerText = MyCom.dataFaultTolerant(data.dispatch_time);
			msg_3.innerText = MyCom.dataFaultTolerant(data.action_time);
			pointMsg.innerText = MyCom.dataFaultTolerant(data.advise);
			for (; i < gradle; i++) {
				xxs[i].className = 'm-l icon-xx icon-xx-s';
			}
			evaluateBtn.onclick = function() {
				gotoEvaluatePg(mCpId);
			}
		}

		/**
		 * 报障关闭
		 */
		function showView5(doc) {
			console.log('showView5');
			mC6.style.display = 'block';
			//处理员
			var msg_1 = doc.getElementById('acms-c-6-msg-1');
			msg_1.innerText = '未分配';
		}

		/**
		 * 已完成
		 */
		function showView6(doc, data, isTwo) {
			console.log('showView6');
			var gradle = data.point;
			mC5.style.display = 'block';
			//处理员
			var msg_1 = doc.getElementById('acms-c-5-sub-1-msg-1');
			//接障时间
			var msg_2 = doc.getElementById('acms-c-5-sub-1-msg-2');
			//处理时间
			var msg_3 = doc.getElementById('acms-c-5-sub-1-msg-3');
			//评价按钮
			var evaluateBtn = doc.getElementById('acms-c-5-sub-1-evaluate-msg-1');
			var evaluateBtnP = doc.getElementById('acms-c-5-sub-1-evaluate');
			//评分
			var sub_2 = doc.getElementById('acms-c-5-sub-2');
			var pointMsg = doc.getElementById('acms-c-5-sub-2-msg-1');
			var xxs = sub_2.getElementsByClassName('icon-xx');
			var i = 0;
			if (gradle == null) {
				sub_2.style.display = 'none';
				evaluateBtnP.style.display = 'block';
			} else {
				sub_2.style.display = 'block';
				evaluateBtnP.style.display = 'none';
			}
			msg_1.innerText = MyCom.fomatName(data.action_person);
			msg_2.innerText = MyCom.dataFaultTolerant(data.dispatch_time);
			msg_3.innerText = MyCom.dataFaultTolerant(data.action_time);
			pointMsg.innerText = MyCom.dataFaultTolerant(data.advise);
			for (; i < gradle; i++) {
				xxs[i].className = 'm-l icon-xx icon-xx-s';
			}
			evaluateBtn.onclick = function() {
				gotoEvaluatePg(mCpId);
			}
		}

		/**
		 * 跳转到评价页
		 * @param{Number} cpid - 故障id
		 */
		function gotoEvaluatePg(cpid) {
			api.openWin({
				name : 'evaluate',
				url : './evaluate.html',
				pageParam : {
					'id' : cpid,
					'name' : api.winName
				}
			});
		}

		/**
		 * 打开大图页
		 * @param{String} url - 图片url
		 */
		function openLargePicPg(url) {
			console.log('------------1');
			api.openWin({
				name : 'ImageShow',
				url : './ImageShow.html',
				pageParam : {
					'url' : url
				}
			});
		}

		/**
		 * 服务器请求：取消报障
		 * @param{Number} cpid - 故障id
		 */
		function requestCancelCp(cpid) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_CANCEL_CP;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('取消报障--re=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						isCancel = true;
						triggerStatusChangeListener(6, null);
						requestCpDetails(mCpId);
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器异常'
					});
				}
			});
		}

		/**
		 * 服务器请求：加急报障
		 * @param{Number} cpid - 故障id
		 */
		function requestUrgentCp(cpid) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_URGENT_CP;
			MyRequest.requestMethod(url, data, function(re) {
				console.log('加急报障--re=' + JSON.stringify(re));
				if (re) {
					console.log('加急报障--re=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						isUrgent = true;
						triggerStatusChangeListener(null, 1);
						requestCpDetails(mCpId);
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器异常'
					});
				}
			});
		}

		/**
		 * 服务器请求：获取报障详情
		 * @param{Number} cpid - 故障id
		 */
		function requestCpDetails(cpid) {
			//如果不是加急请求或取消请求，那么就弹出提示框。
			if (isUrgent || isCancel) {
			} else {
				api.showProgress({
				});
			}
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_CP_DETAILS;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('获取报障详情--re=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						initView(re.list[0]);
						api.hideProgress();
						if (isUrgent) {
							api.toast({
								msg : '加急成功'
							});
							isUrgent = false;
						} else if (isCancel) {
							api.toast({
								msg : '取消成功'
							});
							isCancel = false;
						}
					} else {
						api.hideProgress();
						if (isUrgent) {
							api.toast({
								msg : '加急成功，数据刷新失败'
							});
							isUrgent = false;
						} else if (isCancel) {
							api.toast({
								msg : '取消成功，数据刷新失败'
							});
							isCancel = false;
						} else {
							api.toast({
								msg : re.msg
							});
						}
					}
				} else {
					api.hideProgress();
					if (isUrgent) {
						api.toast({
							msg : '加急成功，数据刷新失败'
						});
						isUrgent = false;
					} else if (isCancel) {
						api.toast({
							msg : '取消成功，数据刷新失败'
						});
						isCancel = false;
					} else {
						MyCom.errorTip(2);
					}
				}
			});
		}

		/**
		 * 设置“重新刷新详情”的监听
		 */
		function setReloadCpDListener() {
			api.addEventListener({
				name : 'ReloadCpDListener'
			}, function(ret, err) {
				if (ret) {
					requestCpDetails(mCpId);
				} else {
					MyCom.errorTip(1);
				}
			});
		}

		/**
		 * 触发“item数据状态改变”监听
		 * @param{Number} status - 状态
		 * @param{Number} status - 加急状态
		 */
		function triggerStatusChangeListener(status, urgent) {
			status = status || null;
			urgent = urgent || null;
			api.sendEvent({
				name : 'StatusChangeListener',
				extra : {
					'status' : status,
					'urgent' : urgent
				}
			});
		}
	</script>
</html>
